<template>
    <div class="cond-form">
        <el-form :model="ruleForm" :rules="rule" label-width="100px" ref="form">
            <el-form-item v-for="(item, index) of ruleForm.wfConts" :key="item.key" :rules="rule.wfConts" label-width="0px">
                <div class="rule-wrap">
                    <el-form-item label-width="0px" :prop="'wfConts.'+ index +'.conditions'" :rules="rule.conditions" class="mb10">
                        <el-row v-for="(child, index2) of item.conditions" :key="child.key">
                            <el-col :span="6">
                                <el-form-item label-width="0px" :prop="'wfConts.'+ index +'.conditions.'+ index2 +'.fieldCode'" class="mb5" :rules="rule.fieldCode">
                                    <select-para 
                                        :options="condOpt" 
                                        casCode="SP_FLOW_FH" 
                                        :casVal.sync="child.opeCode"
                                        :casLabel.sync="child.opeName"
                                        :clearCasDisabled="true"
                                        v-model="child.fieldCode"
                                        :label.sync="child.fieldName"
                                        @change="(value) => conditionChange(item, child, value)">
                                    </select-para>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item v-if="child.elemSubCode" label-width="5px" :prop="'wfConts.'+ index +'.conditions.'+ index2 +'.opeCode'" class="mb5" :rules="rule.opeCode">
                                    <select-para 
                                        v-if="['input', 'textarea'].indexOf(child.elemSubCode) > -1" 
                                        v-model="child.opeCode" 
                                        :options="casOpt1" 
                                        :label.sync="child.opeName"
                                        @change="(value) => opeCodeChange(item, child, value)">
                                    </select-para>
                                    <select-para 
                                        v-if="['select', 'radio'].indexOf(child.elemSubCode) > -1" 
                                        v-model="child.opeCode" 
                                        :options="casOpt2" 
                                        :label.sync="child.opeName"
                                        @change="(value) => opeCodeChange(item, child, value)">
                                    </select-para>
                                    <select-para 
                                        v-if="['mulselect', 'checkbox'].indexOf(child.elemSubCode) > -1" 
                                        v-model="child.opeCode" 
                                        :options="casOpt3" 
                                        :label.sync="child.opeName"
                                        @change="(value) => opeCodeChange(item, child, value)">
                                    </select-para>
                                    <select-para 
                                        v-if="['date', 'datetime', 'time'].indexOf(child.elemSubCode) > -1" 
                                        v-model="child.opeCode" 
                                        :options="casOpt4" 
                                        :label.sync="child.opeName"
                                        @change="(value) => opeCodeChange(item, child, value)">
                                    </select-para>
                                    <select-para 
                                        v-if="['dept', 'staff', 'user'].indexOf(child.elemSubCode) > -1" 
                                        v-model="child.opeCode" 
                                        :options="casOpt5" 
                                        :label.sync="child.opeName"
                                        @change="(value) => opeCodeChange(item, child, value)">
                                    </select-para>
                                    <select-para 
                                        v-if="['muldept', 'mulstaff', 'muluser'].indexOf(child.elemSubCode) > -1" 
                                        v-model="child.opeCode" 
                                        :options="casOpt6" 
                                        :label.sync="child.opeName"
                                        @change="(value) => opeCodeChange(item, child, value)">
                                    </select-para>
                                    <select-para 
                                        v-if="['number'].indexOf(child.elemSubCode) > -1" 
                                        v-model="child.opeCode" 
                                        :options="casOpt7" 
                                        :label.sync="child.opeName"
                                        @change="(value) => opeCodeChange(item, child, value)">
                                    </select-para>
                                    <select-para 
                                        v-if="['bool'].indexOf(child.elemSubCode) > -1" 
                                        v-model="child.opeCode" 
                                        :options="casOpt8" 
                                        :label.sync="child.opeName"
                                        @change="(value) => opeCodeChange(item, child, value)">
                                    </select-para>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item label-width="5px" v-if="child.opeCode">
                                    <el-form-item 
                                        v-if="(['input', 'textarea'].indexOf(child.elemSubCode) > -1) && (['IS_NULL', 'IS_NOT_NUL'].indexOf(child.opeCode) == -1)" 
                                        :prop="'wfConts.'+ index +'.conditions.'+ index2 +'.startVal'" 
                                        :rules="rule.startVal">
                                        <el-input v-model="child.startVal"></el-input>
                                    </el-form-item>

                                    <el-form-item v-if="['select', 'radio'].indexOf(child.elemSubCode) > -1" :prop="'wfConts.'+ index +'.conditions.'+ index2 +'.startVal'" :rules="rule.startVal">
                                        <select-para :code="child.elemCascCode" v-model="child.startVal"></select-para>
                                    </el-form-item>

                                    <el-form-item v-if="['mulselect', 'checkbox'].indexOf(child.elemSubCode) > -1" :prop="'wfConts.'+ index +'.conditions.'+ index2 +'.startVal'" :rules="rule.startVal">
                                        <select-para :code="child.elemCascCode" v-model="child.startVal" multiple collapseTags></select-para>
                                    </el-form-item>
                                    
                                    <template v-if="child.elemSubCode == 'date'">
                                        <el-row>
                                            <template v-if="['BETWEEN', 'NOBETWEEN'].indexOf(child.opeCode) > -1">
                                                <el-col :span="12">
                                                    <el-form-item :prop="'wfConts.'+ index +'.conditions.'+ index2 +'.startVal'" :rules="rule.startVal">
                                                        <el-date-picker type="date" v-model="child.startVal" value-format="yyyy-MM-dd"></el-date-picker>
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :span="12">
                                                    <el-form-item label-width="5px" :prop="'wfConts.'+ index +'.conditions.'+ index2 +'.endVal'" :rules="rule.endVal">
                                                        <el-date-picker type="date" v-model="child.endVal" value-format="yyyy-MM-dd"></el-date-picker>
                                                    </el-form-item>
                                                </el-col>
                                            </template>
                                            <template v-else-if="['EQ', 'NE', 'LE', 'GE'].indexOf(child.opeCode) > -1">
                                                <el-col :span="24">
                                                    <el-form-item :prop="'wfConts.'+ index +'.conditions.'+ index2 +'.startVal'" :rules="rule.startVal">
                                                        <el-date-picker type="date" v-model="child.startVal" value-format="yyyy-MM-dd"></el-date-picker>
                                                    </el-form-item>
                                                </el-col>
                                            </template>
                                        </el-row>
                                    </template>

                                    <template v-if="child.elemSubCode == 'datetime'">
                                        <el-row>
                                            <template v-if="['BETWEEN', 'NOBETWEEN'].indexOf(child.opeCode) > -1">
                                                <el-col :span="12">
                                                    <el-form-item :prop="'wfConts.'+ index +'.conditions.'+ index2 +'.startVal'" :rules="rule.startVal">
                                                        <el-date-picker type="datetime" v-model="child.startVal" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :span="12">
                                                    <el-form-item label-width="5px" :prop="'wfConts.'+ index +'.conditions.'+ index2 +'.endVal'" :rules="rule.endVal">
                                                        <el-date-picker type="datetime" v-model="child.endVal" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                                                    </el-form-item>
                                                </el-col>
                                            </template>
                                            <template v-else-if="['EQ', 'NE', 'LE', 'GE'].indexOf(child.opeCode) > -1">
                                                <el-col :span="24">
                                                    <el-form-item :prop="'wfConts.'+ index +'.conditions.'+ index2 +'.startVal'" :rules="rule.startVal">
                                                        <el-date-picker type="datetime" v-model="child.startVal" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                                                    </el-form-item>
                                                </el-col>
                                            </template>
                                        </el-row>
                                    </template>

                                    <template v-if="child.elemSubCode == 'time'">
                                        <el-row>
                                            <template v-if="['BETWEEN', 'NOBETWEEN'].indexOf(child.opeCode) > -1">
                                                <el-col :span="12">
                                                    <el-form-item :prop="'wfConts.'+ index +'.conditions.'+ index2 +'.startVal'" :rules="rule.startVal">
                                                        <el-date-picker type="time" v-model="child.startVal" value-format="HH:mm:ss"></el-date-picker>
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :span="12">
                                                    <el-form-item label-width="5px" :prop="'wfConts.'+ index +'.conditions.'+ index2 +'.endVal'" :rules="rule.endVal">
                                                        <el-date-picker type="time" v-model="child.endVal" value-format="HH:mm:ss"></el-date-picker>
                                                    </el-form-item>
                                                </el-col>
                                            </template>
                                            <template v-else-if="['EQ', 'NE', 'LE', 'GE'].indexOf(child.opeCode) > -1">
                                                <el-col :span="24">
                                                    <el-form-item :prop="'wfConts.'+ index +'.conditions.'+ index2 +'.startVal'" :rules="rule.startVal">
                                                        <el-date-picker type="time" v-model="child.startVal" value-format="HH:mm:ss"></el-date-picker>
                                                    </el-form-item>
                                                </el-col>
                                            </template>
                                        </el-row>
                                    </template>

                                    <el-form-item 
                                        v-if="(child.elemSubCode == 'dept') && (['IS_NULL', 'IS_NOT_NUL'].indexOf(child.opeCode) == -1)" 
                                        :prop="'wfConts.'+ index +'.conditions.'+ index2 +'.startVal'" 
                                        :rules="rule.startVal">
                                        <select-dept v-model="child.startVal" :label.sync="child.startName"></select-dept>
                                    </el-form-item>
                                    <el-form-item 
                                        v-if="(child.elemSubCode == 'staff') && (['IS_NULL', 'IS_NOT_NUL'].indexOf(child.opeCode) == -1)" 
                                        :prop="'wfConts.'+ index +'.conditions.'+ index2 +'.startVal'" 
                                        :rules="rule.startVal">
                                        <select-staff v-model="child.startVal" :label.sync="child.startName"></select-staff>
                                    </el-form-item>
                                    <el-form-item 
                                        v-if="(child.elemSubCode == 'user') && (['IS_NULL', 'IS_NOT_NUL'].indexOf(child.opeCode) == -1)" 
                                        :prop="'wfConts.'+ index +'.conditions.'+ index2 +'.startVal'" 
                                        :rules="rule.startVal">
                                        <select-user v-model="child.startVal" :label.sync="child.startName"></select-user>
                                    </el-form-item>

                                    <el-form-item 
                                        v-if="child.elemSubCode == 'muldept'" 
                                        :prop="'wfConts.'+ index +'.conditions.'+ index2 +'.startVal'" 
                                        :rules="rule.startVal">
                                        <select-dept v-model="child.startVal" :label.sync="child.startName" multiple></select-dept>
                                    </el-form-item>
                                    <el-form-item 
                                        v-if="child.elemSubCode == 'mulstaff'" 
                                        :prop="'wfConts.'+ index +'.conditions.'+ index2 +'.startVal'" 
                                        :rules="rule.startVal">
                                        <select-staff v-model="child.startVal" :label.sync="child.startName" multiple></select-staff>
                                    </el-form-item>
                                    <el-form-item 
                                        v-if="child.elemSubCode == 'muluser'" 
                                        :prop="'wfConts.'+ index +'.conditions.'+ index2 +'.startVal'" 
                                        :rules="rule.startVal">
                                        <select-user v-model="child.startVal" :label.sync="child.startName" multiple></select-user>
                                    </el-form-item>

                                    <template v-if="child.elemSubCode == 'number'">
                                        <el-row>
                                            <template v-if="['BETWEEN', 'NOBETWEEN'].indexOf(child.opeCode) > -1">
                                                <el-col :span="12">
                                                    <el-form-item :prop="'wfConts.'+ index +'.conditions.'+ index2 +'.startVal'" :rules="rule.startVal">
                                                        <el-input-number v-model="child.startVal"></el-input-number>
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :span="12">
                                                    <el-form-item label-width="5px" :prop="'wfConts.'+ index +'.conditions.'+ index2 +'.endVal'" :rules="rule.endVal">
                                                        <el-input-number v-model="child.endVal"></el-input-number>
                                                    </el-form-item>
                                                </el-col>
                                            </template>
                                            <template v-else-if="['EQ', 'NE', 'GT', 'GE', 'LT', 'LE'].indexOf(child.opeCode) > -1">
                                                <el-col :span="24">
                                                    <el-form-item :prop="'wfConts.'+ index +'.conditions.'+ index2 +'.startVal'" :rules="rule.startVal">
                                                        <el-input-number v-model="child.startVal"></el-input-number>
                                                    </el-form-item>
                                                </el-col>
                                            </template>
                                            <template v-else></template>
                                        </el-row>
                                    </template>
                                </el-form-item>
                            </el-col>
                            <el-col :span="2" class="remove-wrap">
                                <i class="el-icon-remove" @click="removeCondition(item, child, index2)"></i>
                            </el-col>
                        </el-row>
                        <el-button type="text" @click="addCondition(item)"><i class="el-icon-circle-plus"></i>添加新条件</el-button>
                    </el-form-item>
                    <div class="del-btn" @click="deleteRuleFun(item, index)">
                        <span class="el-icon-delete"></span>
                    </div>
                </div>
            </el-form-item>
            <el-button type="text" @click="addRuleFun"><i class="el-icon-circle-plus"></i>新增或条件</el-button>
        </el-form>
    </div>
</template>

<script>
import selectPara from '@/components/common/comp/selectPara';
import commCheckbox from '@/components/commCheckbox';
import selectRole from '@/components/selectRole';
import selectUser from '@/components/selectUser';
import selectStaff from '@/components/selectStaff';
import selectDept from '@/components/selectDept';
export default {
    name: 'condForm',
    props: {
        condOpt: { // 字段下拉项
            type: Array,
            required: true,
            default() {
                return []
            }
        },
        viewObj: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    components: {
        selectPara,
        commCheckbox,
        selectRole,
        selectUser,
        selectStaff,
        selectDept
    },
    data() {
        return {
            ruleForm: {
                wfConts: [],
            },
            rule: {
                wfConts: [],
                conditions: [
                    { required: true, message: '请添加查询条件', trigger: 'change', type: 'array' },
                ],
                fieldCode: [
                    { required: true, message: '请选择查询字段', trigger: 'change' },
                ],
                opeCode: [
                    { required: true, message: '请选择运算符', trigger: 'change' },
                ],
                startVal: [
                    { required: true, message: '请选择查询字段值', trigger: 'change' },
                ],
                endVal: [
                    { required: true, message: '请选择查询字段值', trigger: 'change' },
                ],
            },
            condition: { // 触发条件
                key: '',
                fieldCode: '',
                fieldName: '',
                opeCode: '',
                opeName: '',
                startVal: [],
                startName: [],
                endVal: [],
                endName: [],
                elemSubCode: '',
                elemCascCode: ''
            },
            casOpt1: [ // 运算符下拉项 -- input/textarea
                {
                    label: '是',
                    value: 'EQ'
                },
                {
                    label: '不是',
                    value: 'NE'
                },
                {
                    label: '开始等于',
                    value: 'START_LIKE'
                },
                {
                    label: '开始不等于',
                    value: 'START_NOT_LIKE'
                },
                {
                    label: '结束等于',
                    value: 'END_LIKE'
                },
                {
                    label: '结束不等于',
                    value: 'END_NOT_LIKE'
                },
                {
                    label: '包含',
                    value: 'ALL_LIKE'
                },
                {
                    label: '不包含',
                    value: 'ALL_NOT_LIKE'
                },
                {
                    label: '为空',
                    value: 'IS_NULL'
                },
                {
                    label: '不为空',
                    value: 'IS_NOT_NUL'
                },
            ],
            casOpt2: [ // 运算符下拉项 -- select/radio
                {
                    label: '是',
                    value: 'EQ'
                },
                {
                    label: '不是',
                    value: 'NE'
                },
            ],
            casOpt3: [ // 运算符下拉项 -- mulselect/checkbox
                {
                    label: '包含任意',
                    value: 'IN'
                },
                {
                    label: '不包含任意',
                    value: 'NOT_IN'
                },
            ],
            casOpt4: [ // 运算符下拉项 -- date/datetime/time
                {
                    label: '今天',
                    value: 'TODAY'
                },
                {
                    label: '明天',
                    value: 'TOMORROW'
                },
                {
                    label: '本周',
                    value: 'THISWEEK'
                },
                {
                    label: '本月',
                    value: 'THISMONTH'
                },
                {
                    label: '是',
                    value: 'EQ'
                },
                {
                    label: '不是',
                    value: 'NE'
                },
                {
                    label: '早于',
                    value: 'LE'
                },
                {
                    label: '晚于',
                    value: 'GE'
                },
                {
                    label: '介于',
                    value: 'BETWEEN'
                },
                {
                    label: '不介于',
                    value: 'NOBETWEEN'
                },
                {
                    label: '为空',
                    value: 'IS_NULL'
                },
                {
                    label: '不为空',
                    value: 'IS_NOT_NUL'
                },
            ],
            casOpt5: [ // 运算符下拉项 -- dept/staff/user
                {
                    label: '是',
                    value: 'EQ'
                },
                {
                    label: '不是',
                    value: 'NE'
                },
                {
                    label: '为空',
                    value: 'IS_NULL'
                },
                {
                    label: '不为空',
                    value: 'IS_NOT_NUL'
                },
            ],
            casOpt6: [ // 运算符下拉项 -- muldept/mulstaff/muluser
                {
                    label: '包含任意',
                    value: 'IN'
                },
                {
                    label: '不包含任意',
                    value: 'NOT_IN'
                },
            ],
            casOpt7: [ // 运算符下拉项 -- number
                {
                    label: '等于',
                    value: 'EQ'
                },
                {
                    label: '不等于',
                    value: 'NE'
                },
                {
                    label: '大于',
                    value: 'GT'
                },
                {
                    label: '大于等于',
                    value: 'GE'
                },
                {
                    label: '小于',
                    value: 'LT'
                },
                {
                    label: '小于等于',
                    value: 'LE'
                },
                {
                    label: '介于',
                    value: 'BETWEEN'
                },
                {
                    label: '不介于',
                    value: 'NOBETWEEN'
                },
                {
                    label: '为空',
                    value: 'IS_NULL'
                },
                {
                    label: '不为空',
                    value: 'IS_NOT_NUL'
                },
            ],
            casOpt8: [ // 运算符下拉项 -- bool
                {
                    label: '是',
                    value: 'EQ'
                },
                {
                    label: '不是',
                    value: 'NE'
                },
            ]
        }
    },
    methods: {
        addRuleFun() { // 新增规则
            let condition = JSON.parse(JSON.stringify(this.condition));
            let obj = {
                key: new Date().getTime(),
                conditions: [{
                    ...condition,
                    key: new Date().getTime()
                }],
            };
            this.ruleForm.wfConts.push(obj);
        },
        deleteRuleFun(item, index) { // 删除规则
            this.$confirm('确认删除该条件？', {title: '提示', type: 'warning'}).then(() => {
                this.ruleForm.wfConts.splice(index, 1);
            }).catch(() => {});
        },
        addCondition(item) { // 添加新条件
            let condition = JSON.parse(JSON.stringify(this.condition));
            item.conditions.push({
                ...condition,
                key: new Date().getTime()
            });
        },
        conditionChange(item, child, value) { // 条件字段change
            child.opeCode = '';
            child.opeName = '';

            let obj = this.condOpt.find(v => v.value == value);
            child.elemSubCode = '';
            if(obj) {
                let isMul = (['mulselect', 'checkbox', 'muldept', 'mulstaff', 'muluser'].indexOf(obj.elemSubCode) > -1);
                if(isMul) {
                    child.startVal = [];
                    child.startName = [];
                    child.endVal = [];
                    child.endName = [];
                }else {
                    child.startVal = '';
                    child.startName = '';
                    child.endVal = '';
                    child.endName = '';
                }
                child.elemSubCode = obj.elemSubCode;
                child.elemCascCode = obj.elemCascCode;
            }
        },
        opeCodeChange(item, child, value) { // 运算符change
            let isMul = (['mulselect', 'checkbox', 'muldept', 'mulstaff', 'muluser'].indexOf(child.elemSubCode) > -1);
            if(isMul) {
                child.startVal = [];
                child.startName = [];
                child.endVal = [];
                child.endName = [];
            }else {
                child.startVal = '';
                child.startName = '';
                child.endVal = '';
                child.endName = '';
            }
        },
        removeCondition(item, child, index) { // 删除条件
            item.conditions.splice(index, 1);
        },
        getData() { // 获取通过校验的数据
            return new Promise((resolve, reject) => {
                this.$refs.form.validate(valid => {
                    if(valid) {
                        let wfConts = this.ruleForm.wfConts.map(item => {
                            let conditions = item.conditions.map(item2 => {
                                if((['mulselect', 'checkbox', 'muldept', 'mulstaff', 'muluser'].indexOf(item2.elemSubCode) > -1)) {
                                    return {
                                        fieldCode: item2.fieldCode,
                                        fieldName: item2.fieldName,
                                        opeCode: item2.opeCode,
                                        opeName: item2.opeName,
                                        startVal: item2.startVal.join(),
                                        startName: item2.startName.join(),
                                        endVal: item2.endVal.join(),
                                        endName: item2.endName.join(),
                                        elemSubCode: item2.elemSubCode,
                                        elemCascCode: item2.elemCascCode
                                    }
                                }else {
                                    return {
                                        fieldCode: item2.fieldCode,
                                        fieldName: item2.fieldName,
                                        opeCode: item2.opeCode,
                                        opeName: item2.opeName,
                                        startVal: item2.startVal,
                                        startName: item2.startName,
                                        endVal: item2.endVal,
                                        endName: item2.endName,
                                        elemSubCode: item2.elemSubCode,
                                        elemCascCode: item2.elemCascCode
                                    }
                                }
                            })
                            return {
                                conditions: conditions
                            }
                        })
                        resolve(wfConts);
                    }else {
                        reject();
                    }
                })
            })
        },
        setData(data) { // 设置数据
            this.ruleForm.wfConts = [];
            setTimeout(() => {
                let wfConts = data.conds ? JSON.parse(data.conds) : [];
                this.ruleForm.wfConts = wfConts.map((item, index) => {
                    let conditions = item.conditions ? item.conditions : [];
                    conditions = conditions.map((item2, index2) => {
                        if((['mulselect', 'checkbox', 'muldept', 'mulstaff', 'muluser'].indexOf(item2.elemSubCode) > -1)) {
                            return {
                                key: 'condition' + index2,
                                fieldCode: item2.fieldCode,
                                fieldName: item2.fieldName,
                                opeCode: item2.opeCode,
                                opeName: item2.opeName,
                                startVal: item2.startVal.split(','),
                                startName: item2.startName.split(','),
                                endVal: item2.endVal.split(','),
                                endName: item2.endName.split(','),
                                elemSubCode: item2.elemSubCode,
                                elemCascCode: item2.elemCascCode,
                            }
                        }else {
                            return {
                                key: 'condition' + index2,
                                fieldCode: item2.fieldCode,
                                fieldName: item2.fieldName,
                                opeCode: item2.opeCode,
                                opeName: item2.opeName,
                                startVal: item2.startVal,
                                startName: item2.startName,
                                endVal: item2.endVal,
                                endName: item2.endName,
                                elemSubCode: item2.elemSubCode,
                                elemCascCode: item2.elemCascCode,
                            }
                        }
                    })
                    return {
                        key: 'wfConts' + index,
                        conditions: conditions,
                    }
                })
            }, 200)
        },
        resetFields() { // 重置
            this.setData(this.viewObj);
        },
    }
}
</script>

<style lang='scss' scoped>
.rule-wrap {
    position: relative;
    padding: 10px 30px 0 15px;
    border: 1px dashed #ddd;
    margin-bottom: 10px;
    background-color: #f2f6fc;
    .del-btn {
        display: none;
        position: absolute;
        top: 10px;
        right: 10px;
        height: 20px;
        line-height: 20px;
        cursor: pointer;
        span {
            font-size: 18px;
        }
    }
    &:hover .del-btn {
        display: block;
    }
    .remove-wrap {
        text-align: center;
        i {
            font-size: 16px;
            cursor: pointer;
        }
    }
}
.mb5 {
    margin-bottom: 5px;
}
.mb10 {
    margin-bottom: 10px;
}
</style>